<template>
  <div :class="['search-container', { closed: isClosedRef }]">
    <!-- 搜索标题 -->
    <div class="search-title-container">
      <span>字段过滤</span>
      <span class="search-clear" @click="handleClearClick">
        <BaseIcon type="refresh" />
      </span>
    </div>

    <!-- 过滤表单 -->
    <div :class="['filter-form-wrapper', { opacity: isClosedRef }]">
      <slot name="filter"></slot>
    </div>

    <!-- 收缩按钮 -->
    <div class="close-tip-container" @click="handleCloseClick">
      <BaseIcon type="left" v-if="!isClosedRef" />
      <BaseIcon type="right" v-else-if="isClosedRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from "@vue/runtime-core";
import { storeToRefs } from "pinia";
import appStore from '@/store/index';
const { proxy } = getCurrentInstance();
const useStaffStore = proxy.$appStore.useStaffStore;
const { isClosedRef } = storeToRefs(useStaffStore);
const { isClearFormRef } = storeToRefs(appStore.useCommonStore);
// const isClosedRef = ref(false);
// // 设置isCloseRef的状态
// function setIsClosed(bool: boolean) {
//   isClosedRef.value = bool;
// }
// 清空表单
function handleClearClick() {
  console.log("clearForm");
  appStore.useCommonStore.setIsClearForm(true);
}
// 点击关闭按钮
function handleCloseClick() {
  console.log("close-tip");
  // console.log(proxy.$appStore.useStaffStore.setIsClosed, "setIsClosed");
  // console.log(isClosedRef, "isClosedRef");
  useStaffStore.setIsClosed(!isClosedRef.value);
  // setIsClosed(true);
}
</script>

<style lang="less" scoped>
.search-container {
  position: relative;
  width: 280px;
  height: 100%;
  background-color: #fff;
  padding: 10px 20px;
  margin: 1px;
  flex-shrink: 0;
  transition: all 0.2s;

  &.closed {
    width: 0;
    padding: 0 7px;
    transition: all 0.2s;
    .search-title-container,
    .filter-form-wrapper {
      opacity: 0;
      transition: all 0.2s;
    }
  }

  // 标题
  .search-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search-clear {
      cursor: pointer;
    }
  }

  // 表单
  .filter-form-wrapper {
  }

  // 按钮
  .close-tip-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 15px;
    height: 100px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #1890ff;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s;
  }
}
</style>
